<template>
  <ul>
    <li v-for="(item, index) in detail" :key="index">
      <div class="imgbox">
        <img :src="item.postUrlForShare" alt="" />

        <b v-if="item.score == '0.0'"> </b>
        <b v-if="item.score !== '0.0'">{{ item.score }}分</b>
        <p>{{ item.cornerDisplayName }}</p>
      </div>
      <p v-if="!item.discountTag" class="hot">火热抢购中</p>
      <p v-if="item.discountTag" class="tag">{{ item.discountTag }}</p>
      <p class="title">{{ item.name }}</p>
    </li>
  </ul>
</template>

<script setup>
import axios from "@/api/axios.js";
import { ref } from "vue";
const getDetail = () =>
  axios.get(
    "https://show.maoyan.com/maoyansh/myshow/ajax/performances/rob/main?uuid=6074gamvnhk0bxpwvnzz95oqxeid9zl8z9wj1oj30cx8b20hrh1xknvnoxm2jyn7&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0",
    {}
  );
const detail = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data.data;
  // console.log("必抢detail", detail);
  // return detail;
}
update();
</script>

<style lang="scss" scoped>
.imgbox {
  display: flex;
  margin: 0 5rem 0 0;
  width: 80rem;
  height: 108rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12rem;
  }
  b {
    position: absolute;
    bottom: 5rem;
    left: 9rem;
    font-size: 14rem;
    color: #faaf00;
  }
  p {
    position: absolute;
    top: 2rem;
    right: 0rem;
    font-size: 13rem;
    padding: 0 6rem;
    transform: scale(0.8);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
.tag {
  display: inline-flex;
  align-items: center;
  text-align: left;
  color: #fff;
  font-weight: 700;
  font-size: 15rem;    
  white-space: nowrap;
  margin: 4rem 0;
  transform: scale(.8);
  transform-origin: left top;
  background-color: #ff9e16;
  padding: 0 6rem;
  border-radius: 7rem;
}
.hot{
  display: inline-flex;
  align-items: center;
  text-align: left;
  color: #fff;
  font-weight: 700;
  font-size: 15rem;    
  white-space: nowrap;
  margin: 4rem 0;
  transform: scale(.8);
  transform-origin: left top;
  background-color: #ff0b0b;
  padding: 0 6rem;
  border-radius: 7rem;
}
.title {
  width: 80rem;
  height: 35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  :nth-child(1){
    margin-top: 1rem;
  }
}
</style>
